<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 根元素，设置页面语言为简体中文 -->
<html lang="zh-CN">

<!-- 文档头部，包含页面元数据 -->

<head>
    <!-- 设置文档字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 适配移动端设备，设置视口宽度为设备宽度，初始缩放比例为 1.0，最大缩放比例为 5.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <!-- 设置页面标题 -->
    <title>『 月华 』正在等待与您聊天 ~ </title>
    <!-- 定义页面的样式信息 -->
    <style>
        /**
         * 引入 Font Awesome 6.4.0 图标库样式文件
         */
        @import url('./import/fontAwesome/css/all.min.css');
        /**
         * 引入自定义的页面样式文件
         */
        @import url('./css/startPageStyle.css');
    </style>
</head>

<!-- 页面主体，包含所有可见内容 -->

<body>
    <!-- 背景元素，用于设置页面背景样式 -->
    <div class="background"></div>
    <!-- 粒子效果容器，用于展示粒子动画 -->
    <div class="particles-container" id="particlesContainer"></div>
    <!-- 玻璃效果元素，用于添加玻璃质感样式 -->
    <div class="glass-effect"></div>
    <!-- 页面主要内容容器 -->
    <div class="content">
        <!-- Logo 及副标题容器 -->
        <div class="logo-container">
            <!-- 显示 Logo 名称 -->
            <div class="logo"> 月华 </div>
            <!-- 显示 Logo 副标题 -->
            <div class="subtitle">您专属的本地智能 AI 少女助理</div>
        </div>
        <!-- 欢迎文本 -->
        <h1 class="welcome-text">让我们一同认知世界吧!</h1>
        <!-- 进度条容器 -->
        <div class="progress-container">
            <!-- 进度条主体 -->
            <div class="progress-bar" id="progressBar">
                <!-- 进度条发光效果 -->
                <div class="progress-glow"></div>
            </div>
            <!-- 显示进度百分比 -->
            <div class="progress-text" id="progressText">0%</div>
        </div>
        <!-- 进入主页按钮，初始状态为禁用 -->
        <button class="enter-btn" id="enterBtn" disabled>
            <!-- 按钮文本 -->
            <span class="btn-text">进入主页</span>
            <!-- 按钮发光效果 -->
            <div class="btn-glow"></div>
        </button>
    </div>
    <!-- 引入页面交互逻辑的 JavaScript 文件 -->
    <script src="js/startPageScript.js"></script>
</body>

<!-- 文档结束标签 -->

</html>